import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {getCategory} from '@/api/index';
import _ from 'lodash';
import {ScrollView} from 'react-native-gesture-handler';
import {Icategorys, RootStackNavigation} from '@/common/type';
import CategoryItem from './item';
import HeaderRightBtn from './headerRightBtn';
import {DragSortableView} from 'react-native-drag-sort';
import {parentWidth, itemHeight, itemWidth} from './item';
const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f3f6f6',
    padding: 5,
  },
  classfityName: {
    fontSize: 16,
    marginTop: 14,
    marginBottom: 8,
    marginLeft: 10,
  },
  classfityView: {
    flexWrap: 'wrap',
    padding: 5,
    flexDirection: 'row',
  },
});

interface IProps {
  navigation: RootStackNavigation;
  onSubmit: () => void;
  isEdit: Boolean;
}
class Category extends React.Component {
  state = {
    isEdit: false,
    categorys: {} as any,
    myCategorys: [] as Array<Icategorys>,
  };
  constructor(props: IProps) {
    super(props);
    props.navigation.setOptions({
      headerRight: () => <HeaderRightBtn onSubmit={this.onSubmit} />,
    });
  }
  onSubmit = () => {
    // 设置编辑状态
    this.setState({
      isEdit: !this.state.isEdit,
    });
    // 全局缓存设置下
  };
  async getData() {
    const res = await getCategory();
    let arr = _.groupBy(res.data, (item: Icategorys) => item.classity);
    this.setState({
      categorys: arr,
    });
  }
  componentDidMount(): void {
    this.getData();
  }

  renderItem(item: Icategorys) {
    return <CategoryItem data={item} key={item.id} />;
  }
  onDataChange(data: Icategorys[]) {
    console.log(data, '------------onDataChange');
    // this.setState({
    //   myCategorys: data,
    // });
  }
  render(): React.ReactNode {
    const {categorys, myCategorys} = this.state;
    return (
      // 可滑动
      <ScrollView style={style.container}>
        <Text style={style.classfityName}>我的分类</Text>
        <View style={style.classfityView}>
          <DragSortableView
            dataSource={myCategorys}
            renderItem={this.renderItem}
            sortable={true}
            keyExtractor={i => i.id}
            onDataChange={this.onDataChange}
            parentWidth={parentWidth}
            childrenWidth={itemWidth}
            childrenHeight={itemHeight}
          />
        </View>
        <View>
          {Object.keys(categorys).map(classify => {
            return (
              <View key={classify}>
                <Text style={style.classfityName}>{classify}</Text>
                <View style={style.classfityView}>
                  <DragSortableView
                    dataSource={categorys[classify]}
                    renderItem={this.renderItem}
                    sortable={true}
                    keyExtractor={i => i.id}
                    onDataChange={this.onDataChange}
                    parentWidth={parentWidth}
                    childrenWidth={itemWidth}
                    childrenHeight={itemHeight}
                  />
                  {/* {categorys[classify].map(this.renderItem)} */}
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    );
  }
}

export default Category;
